<template>
    <div class="nav-container">
        <div class="header"></div>
        <ul class="nav-wrap">
            <li class="flex align-center justify-center pointer" :class="{'active': active === item.id}" v-for="item in navs" :key="item.id" :title="item.name" @click="navClick(item)">
                <i class="block iconfont" :class="'icon-' + item.icon"></i>
            </li>
        </ul>
    </div>
</template>
<script lang="ts">
const options = [
    {
        name: '对话',
        id: 1,
        icon: 'chat'
    },
    {
        name: '联系人',
        id: 2,
        icon: 'contacts'
    },
    {
        name: '群组',
        id: 3,
        icon: 'group'
    },
    {
        name: '设置',
        id: 4,
        icon: 'setting'
    }
]

import { defineComponent, reactive, ref } from 'vue'

interface Navs {
    name: string
    id: number
    icon: string
}

export default defineComponent({
    setup() {
        const navs = reactive<Navs[]>(options)
        const active = ref<number>(1)
        const navClick = (data: Navs) => {
            active.value = data.id
        }
        return {
            navs,
            active,
            navClick
        }
    }
})
</script>

<style lang="less" scoped>
.nav-container {
    width: 57px;
    height: 100%;
    background: var(--theme-color);
    .nav-wrap {
        > li {
            height: 40px;
            line-height: 40px;
            color: #a5b6c1;
            .icon {
                font-size: 18px;
            }
        }
        > li.active {
            background-color: #353f47;
            color: #f7f7f7;
            position: relative;
            &:before {
                content: "";
                width: 3px;
                height: 100%;
                background-color: #54d68b;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}
</style>
